<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vis_carbon</title>
    <script src="echarts.js"></script>
  </head>
  <body>
    <div id="basicChart" style="width: 80%; height: 50vh"></div>
    <script>
        let basicChartDom = document.querySelector('#basicChart')
        let basicChart = echarts.init(basicChartDom)
        let option = {
            title: {
                show:true,//显示标题
                text: '中国各产业CO2排放变化趋势图',//主标题
                subtext:'Raw Coal\nCrude Oil\nNatural Gas\nTotal apparent CO2 emissions (mt)',//副标题
                textStyle:{
                    color:'#893448',
                    fontweight:'bold',//字体宽度加粗
                    fontSize:26,//字体大小
                    textShadowColor:'#d95850',//设置字体阴影颜色
                    textShadowBlur:10,
                },
            },
            legend: {
                show : true,
                type : 'plain',
                data: ['Raw Coal', 'Crude Oil','Natural Gas','Total CO2'],
                right :-120,//图例组件离容器左侧的距离
                top:50,
                orient : 'vertical',
                align:'right',
                padding : [5,50,5,0],
                itemGap : 10,
                itemWidth:90,
                itemHeight:18,
                selectedMode:'multiple',
                selected:{
                  RawCoal:false,
                  CrudeOil:false,
                  NaturalGas:false,
                //  TotalapparentCO2emissions(mt):true,
                },
                formatter:function(name){
                    return name
                },
            },
            grid:{
                    show : true,
                    left:'15%',
                    right:'15%',
                    top:60,
                    bottom:0,
                    width:'auto',
                    height:'auto',
                    containLabel:true,
                    backgroundColor:'rgba(240,240,240,0.5)',
                    borderColor:'#ccc',
                    borderWidth:1,
                },
            tooltip:{
                show:true,
                trigger:'axis',
                axisPointer:{
                    type:'cross',
                    axis:'x',
                },
                psdition:function(point,params,dom,rect,size){
                    return{
                        left:point[0],
                        top:0,
                    }
                },
                formatter:function(params,ticket,callback){
                    let str = ''
                    params.forEach((d)=>{
                        str += `${d.name} 年 ${d.seriesName}CO2排放量 : ${d.data} mt</br>`
                    })
                    return str
                },
            },
            toolbox:{
                show:true,
                orient:'horizontal',
                right:40,
                feature:{
                    dataZoom:{
                        show : true,
                    },
                    magicType:{
                        show:true,
                        type:['line','bar','stack','tiled'],
                    },
                    saveAsImage:{
                        type:'png',
                        name:'中国各产业CO2排放变化趋势图',
                    },
                    restore:{
                        show:true,
                    },
                },
            },
            xAxis: {
                data: ['2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013', '2014', '2015', '2016', '2017'],
            },
            yAxis: {
                min : 30,
                max : 11000,
                type: 'value'
            },
            series: [
                {
                    name: 'Raw Coal',
                    type: 'line',
                    data: [2353.7, 2474.8, 2655.1, 3179.7, 3665.2,4202.8,4669.6,5063.5,5266.6,5761.5,6385.7,7094.3,7546.4,7668.1,7418,7106.2,6815.8,6863.1],
                },
                {
                    name: 'Crude Oil',
                    type: 'line',
                    data: [648.7, 653.4, 691.1, 765.7, 883.4,916.3,978.8,1034.5,1080.2,1160.9,1306.8,1342.8,1427.9,1486.2,1569.3,1655.3,1719.6,1808.7],
                },
                {
                    name: 'Natural Gas',
                    type: 'line',
                    data: [38.2, 44.1, 48.1, 53.8, 65.1,79.1,103.2,130.4,151.1,167.6,185.6,227.4,250,288.1,314,332.5,347.5,380.1],
                },
                {
                    name: 'Total CO2',
                    type: 'line',
                    data: [3214.1, 3364.4,3605, 4249.7, 4894.7,5508.8,6111.1,6624.1,6904.7,7567.6,8425,9274.6,9859,10144.6,10025.5,9779.5,9583.3,9729.1],
                },
            ],
        }
        basicChart.setOption(option)
    </script>
    
  </body>
</html>
